// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

.platform-download-header {
    background-color: $color-marketing-gray-10;

    .platform-download-blocked {
        @include text-body-xl;
        text-align: center;

        img {
            margin-bottom: $spacing-xl;
        }
    }
}

.platform-download-header-wrapper {
    .vpn-logo {
        img {
            height: 60px;
            width: 60px;
        }
    }

    p {
        @include text-body-xl;
    }
}

.vpn-download-instructions {
    padding-top: $spacing-xl;

    &.windows {
        @media #{$mq-lg} {
            .mzp-l-columns {
                grid-template-columns: repeat(6, 1fr);
            }

            .mzp-c-picto {
                grid-column: span 2;

                &:nth-of-type(4) {
                    grid-column: 2/4;
                }
            }
        }
    }
}

.mzp-c-picto {
    text-align: center;

    .mzp-c-picto-image {
        height: 220px;
        object-fit: contain;
    }
}

.vpn-download-faq {
    .faq-info {
        text-align: center;
        margin-bottom: $layout-lg;
    }

    details {
        margin: $spacing-2xl 0;
    }

    h3 {
        @include text-title-xs;
    }

    p,
    li {
        @include text-body-lg;
    }
}

.vpn-footer {
    margin-top: $layout-xl;
}
